<template>
  <div class="employees">
    <div class="employees-left">
      <WebsiteTree
        :cus-height="10"
        @handleNodeClick="handleNodeClick"
      ></WebsiteTree>
    </div>
    <div class="employees-right">
      <QueryForm
        ref="conditionForm"
        module="employees"
        :filterParameters="['siteCode']"
        :searchBtnLoading="loading"
        v-model:searchForm="searchForm"
        v-model:search-column="searchColumn"
        @handle-search="onSearch"
      />
      <div class="common-box">
        <el-row style="height: 40px" class="con-button-rows">
          <ButtonGroup
            :disabledDelete="multipleSelection.length === 0"
            :disabledAdd="!siteCurrRow?.code"
            :hasPermiAdd="['common:employee:add']"
            :hasPermiDelete="['common:employee:delete']"
            :buttonType="['add', 'delete']"
            @add="onAdd"
            @delete="onDelete"
          ></ButtonGroup>
        </el-row>
        <MyTable
          tableId="employees"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
          :page-vo="pageVo"
          ref="commonTable"
          moduleName="employees"
          @handleSelectionChange="handleSelectionChange"
          @handle-page-change="handlePageChange"
        ></MyTable>
      </div>
    </div>
    <Add
      v-if="dialogVisible"
      v-model:visible="dialogVisible"
      :currRow="currRow"
      :siteCurrRow="siteCurrRow"
      :type="type"
      @onSubmit="onSearch"
    ></Add>
  </div>
</template>

<script setup lang='tsx'>
import { ref, onMounted, reactive } from "vue";
import * as api from "@/api/index.js";
import Add from "./components/add.vue";
import { columnFilters,hasPermi } from "@/utils/mUtils.js";
import { ElMessage, ElMessageBox } from "element-plus";
import i18n from "@/lang/index.js";
import { useI18n } from "vue-i18n";
let { t } = useI18n();
defineOptions({
  name: "Employees",
});
const searchForm = ref({
  siteCode: "",
});
const searchColumn = ref([
  {
    label: i18n.global.t("登录名"),
    type: "label_input",
    placeholder: i18n.global.t("请输入"),
    prop: "userName",
  },
  {
    label: i18n.global.t("员工编号"),
    type: "label_input",
    placeholder: i18n.global.t("请输入"),
    prop: "empCode",
  },
  {
    label: i18n.global.t("员工姓名"),
    type: "label_input",
    placeholder: i18n.global.t("请输入"),
    prop: "empName",
  },
  {
    label: i18n.global.t("手机号"),
    type: "label_input",
    placeholder: i18n.global.t("请输入"),
    prop: "phone",
  },
  {
    label: i18n.global.t("邮箱"),
    type: "label_input",
    placeholder: i18n.global.t("请输入"),
    prop: "email",
  },
]);
const loading = ref(false);
const dataSource = ref([]);
const columns = ref([
  {
    type: "checkbox",
    width: 50,
    fixed: "left",
    align: "center",
  },
  {
    title: i18n.global.t("序号"),
    type: "seq",
    width: 60,
    fixed: "left",
  },
    {
    field: "userName",
    title: i18n.global.t("登录名"),
    slots: {
      default: ({ row }) => {
        return [
          <el-button type="primary" disabled={
            !hasPermi(['common:employee:edit'])
          } link onClick={()=>{
            onEdit(row)
          }}>
            {row.userName || ''}
          </el-button>,
        ];
      },
    },
  },
  {
    field: "empCode",
    title: i18n.global.t("员工编号"),
  },
  {
    field: "empName",
    title: i18n.global.t("员工姓名"),
  },
  {
    field: "phone",
    title: i18n.global.t("联系电话"),
  },
  {
    field: "email",
    title: i18n.global.t("邮箱"),
    width: "200px",
  },
  {
    field: "siteName",
    title: i18n.global.t("所属组织"),
    width: "200px",
  },
  {
    field: "companyName",
    title: i18n.global.t("所属公司"),
  },
  {
    field: "postName",
    title: i18n.global.t("角色"),
    width: "150px",
    formatter: ({row}) => {
      return row.empRoleList?.map((item) => item.roleName).join(',') || ''
    }
  },
]);
const pageVo = reactive({
  pageSize: 50,
  total: 10,
  currentPage: 1,
  status: true,
});
const dialogVisible = ref(false);
const currRow = ref({});
const siteCurrRow = ref({});
const type = ref("add");
const multipleSelection = ref([]);
onMounted(() => {
  getTableList();
});
const getTableList = async () => {
  loading.value = true;
  try {
    const { rows, total } = await api.default.system.employees.list({
      ...searchForm.value,
      pageNum: pageVo.currentPage,
      pageSize: pageVo.pageSize,
    });
    dataSource.value = rows;
    pageVo.total = total;
  } finally {
    loading.value = false;
  }
};
const getInfoData = async () => {};
const onSearch = () => {
  pageVo.currentPage = 1;
  getTableList();
};
const handleSelectionChange = (list) => {
  multipleSelection.value = list;
};
const onChangeMenuType = (row) => {};
const onAdd = () => {
  type.value = "add";
  dialogVisible.value = true;
};
const onEdit = (row) => {
  type.value = "edit";
  currRow.value = row;
  dialogVisible.value = true;
};
const onDelete = (row) => {
   const ids = multipleSelection.value.map((item) => item.id);
  ElMessageBox.confirm(t("是否确定删除当前选择数据？"), t("提示"), {
    confirmButtonText: t("确定"),
    cancelButtonText: t("取消"),
    type: "warning",
  })
    .then(() => {
      api.default.system.employees.remove(ids).then(() => {
        ElMessage.success(t("删除成功"));
        onSearch();
      });
    })
    .catch(() => {});
};
const handlePageChange = (val) => {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  getTableList();
};
const handleNodeClick = (row) => {
  siteCurrRow.value = row;
  searchForm.value.siteCode = row.code;
  onSearch();
};
</script>

<style lang="scss" scoped>
.employees {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .employees-left {
    width: 290px;
    padding: 10px;
    height: 100%;
    float: left; /* 左浮动 */
    background: #fff;
  }
  .employees-right {
    width: calc(100% - 300px);
    margin-left: 10px;
    height: 100%;
    background: #fff;
    float: left; /* 左浮动 */
  }
}
</style>